<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D动漫少女测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 50%, #FF1493 100%);
            color: white;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            min-height: 100vh;
        }
        #container {
            width: 100%;
            height: 600px;
            border: 3px solid #FF69B4;
            border-radius: 15px;
            margin: 20px 0;
            box-shadow: 0 10px 30px rgba(255, 105, 180, 0.3);
        }
        #info {
            background: rgba(255, 255, 255, 0.2);
            padding: 15px;
            border-radius: 10px;
            margin: 10px 0;
            backdrop-filter: blur(10px);
        }
        h1 {
            text-align: center;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin: 20px 0;
        }
        .feature {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>🌸 3D动漫少女测试页面 🌸</h1>
    
    <div id="info">
        <h3>✨ 动漫少女特征：</h3>
        <div class="feature-list">
            <div class="feature">💖 粉色双马尾</div>
            <div class="feature">👀 大眼睛</div>
            <div class="feature">😊 可爱腮红</div>
            <div class="feature">👗 蓬蓬裙</div>
            <div class="feature">🌸 樱花背景</div>
            <div class="feature">💫 梦幻环境</div>
        </div>
    </div>
    
    <div id="container"></div>
    
    <div id="info">
        <h3>🎮 控制说明：</h3>
        <p>• 数字人会缓慢旋转展示各个角度</p>
        <p>• 双马尾会自然摆动</p>
        <p>• 呼吸动画让角色更生动</p>
        <p>• 樱花花瓣营造梦幻氛围</p>
    </div>

    <script src="js/three.min.js"></script>
    <script src="js/gsap.min.js"></script>
    <script>
        console.log('开始创建动漫少女...');
        
        // 检查库是否加载
        if (typeof THREE === 'undefined') {
            console.error('Three.js未加载');
            document.getElementById('info').innerHTML = '<h3>❌ 错误：Three.js未加载</h3>';
        } else {
            console.log('Three.js已加载，版本:', THREE.REVISION);
        }
        
        if (typeof gsap === 'undefined') {
            console.error('GSAP未加载');
        } else {
            console.log('GSAP已加载，版本:', gsap.version);
        }
        
        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xFFB6C1); // 粉色背景
        console.log('场景已创建');

        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000);
        camera.position.set(0, 0, 5);
        console.log('相机已创建');

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(800, 600);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.outputColorSpace = THREE.SRGBColorSpace;
        console.log('渲染器已创建');

        // 添加到容器
        const container = document.getElementById('container');
        container.appendChild(renderer.domElement);
        console.log('渲染器已添加到容器');

        // 添加光照
        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(5, 5, 5);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        console.log('光照已添加');

        // 创建动漫少女
        createAnimeGirl();

        // 创建环境
        createEnvironment();

        // 动画循环
        const clock = new THREE.Clock();
        function animate() {
            requestAnimationFrame(animate);
            
            const elapsedTime = clock.getElapsedTime();
            
            // 旋转整个角色
            if (window.animeGirl) {
                window.animeGirl.rotation.y += 0.005;
            }
            
            // 双马尾摆动
            if (window.leftTail && window.rightTail) {
                window.leftTail.rotation.z = -0.3 + Math.sin(elapsedTime * 2) * 0.1;
                window.rightTail.rotation.z = 0.3 + Math.sin(elapsedTime * 2 + Math.PI) * 0.1;
            }
            
            // 呼吸动画
            if (window.body) {
                window.body.scale.y = 1 + Math.sin(elapsedTime * 2) * 0.02;
            }
            
            renderer.render(scene, camera);
        }

        // 创建动漫少女函数
        function createAnimeGirl() {
            console.log('开始创建动漫少女...');
            
            const girl = new THREE.Group();
            
            // 头部
            const headGeometry = new THREE.SphereGeometry(1, 32, 32);
            headGeometry.scale(1, 1.2, 0.8);
            const headMaterial = new THREE.MeshLambertMaterial({ 
                color: 0xFFE4C4,
                transparent: true,
                opacity: 0.95
            });
            const head = new THREE.Mesh(headGeometry, headMaterial);
            head.position.y = 0.5;
            head.castShadow = true;
            girl.add(head);
            
            // 身体
            const bodyGeometry = new THREE.CylinderGeometry(0.7, 0.5, 1.8, 16);
            const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0xFFB6C1 });
            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
            body.position.y = -0.3;
            body.castShadow = true;
            girl.add(body);
            window.body = body;
            
            // 头发
            const hairGeometry = new THREE.SphereGeometry(1.1, 16, 16, 0, Math.PI * 2, 0, Math.PI * 0.6);
            const hairMaterial = new THREE.MeshLambertMaterial({ color: 0xFF69B4 });
            const hair = new THREE.Mesh(hairGeometry, hairMaterial);
            hair.position.y = 0.7;
            hair.rotation.x = Math.PI * 0.1;
            girl.add(hair);
            
            // 双马尾
            const tailGeometry = new THREE.CylinderGeometry(0.1, 0.15, 1.5, 8);
            const tailMaterial = new THREE.MeshLambertMaterial({ color: 0xFF69B4 });
            
            const leftTail = new THREE.Mesh(tailGeometry, tailMaterial);
            leftTail.position.set(-0.8, 0.5, 0);
            leftTail.rotation.z = -0.3;
            leftTail.rotation.x = 0.2;
            girl.add(leftTail);
            window.leftTail = leftTail;
            
            const rightTail = new THREE.Mesh(tailGeometry, tailMaterial);
            rightTail.position.set(0.8, 0.5, 0);
            rightTail.rotation.z = 0.3;
            rightTail.rotation.x = 0.2;
            girl.add(rightTail);
            window.rightTail = rightTail;
            
            // 眼睛
            const eyeWhiteGeometry = new THREE.SphereGeometry(0.2, 16, 16);
            const eyeWhiteMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
            
            const leftEyeWhite = new THREE.Mesh(eyeWhiteGeometry, eyeWhiteMaterial);
            leftEyeWhite.position.set(-0.35, 0.6, 0.75);
            leftEyeWhite.scale.set(1.5, 1, 0.3);
            girl.add(leftEyeWhite);
            
            const rightEyeWhite = leftEyeWhite.clone();
            rightEyeWhite.position.set(0.35, 0.6, 0.75);
            girl.add(rightEyeWhite);
            
            // 瞳孔
            const pupilGeometry = new THREE.SphereGeometry(0.08, 16, 16);
            const pupilMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 });
            
            const leftPupil = new THREE.Mesh(pupilGeometry, pupilMaterial);
            leftPupil.position.set(-0.35, 0.6, 0.85);
            girl.add(leftPupil);
            
            const rightPupil = leftPupil.clone();
            rightPupil.position.set(0.35, 0.6, 0.85);
            girl.add(rightPupil);
            
            // 高光
            const highlightGeometry = new THREE.SphereGeometry(0.03, 8, 8);
            const highlightMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
            
            const leftHighlight = new THREE.Mesh(highlightGeometry, highlightMaterial);
            leftHighlight.position.set(-0.32, 0.65, 0.9);
            girl.add(leftHighlight);
            
            const rightHighlight = leftHighlight.clone();
            rightHighlight.position.set(0.38, 0.65, 0.9);
            girl.add(rightHighlight);
            
            // 嘴巴
            const mouthGeometry = new THREE.SphereGeometry(0.1, 16, 16, 0, Math.PI * 2, 0, Math.PI * 0.5);
            const mouthMaterial = new THREE.MeshLambertMaterial({ color: 0xFF69B4 });
            const mouth = new THREE.Mesh(mouthGeometry, mouthMaterial);
            mouth.position.set(0, 0.2, 0.8);
            mouth.rotation.x = Math.PI;
            mouth.scale.set(1.2, 0.8, 0.5);
            girl.add(mouth);
            
            // 腮红
            const blushGeometry = new THREE.SphereGeometry(0.15, 8, 8);
            const blushMaterial = new THREE.MeshLambertMaterial({ 
                color: 0xFFB6C1,
                transparent: true,
                opacity: 0.6
            });
            
            const leftBlush = new THREE.Mesh(blushGeometry, blushMaterial);
            leftBlush.position.set(-0.6, 0.3, 0.7);
            leftBlush.scale.set(0.8, 0.6, 0.3);
            girl.add(leftBlush);
            
            const rightBlush = leftBlush.clone();
            rightBlush.position.set(0.6, 0.3, 0.7);
            girl.add(rightBlush);
            
            // 裙子
            const skirtGeometry = new THREE.ConeGeometry(1.2, 1.5, 16);
            const skirtMaterial = new THREE.MeshLambertMaterial({ color: 0xFF1493 });
            const skirt = new THREE.Mesh(skirtGeometry, skirtMaterial);
            skirt.position.y = -1.2;
            skirt.rotation.x = Math.PI;
            girl.add(skirt);
            
            scene.add(girl);
            window.animeGirl = girl;
            
            console.log('动漫少女已创建并添加到场景');
        }

        // 创建环境
        function createEnvironment() {
            // 地面
            const groundGeometry = new THREE.PlaneGeometry(20, 20);
            const groundMaterial = new THREE.MeshLambertMaterial({ color: 0xFFB6C1 });
            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
            ground.rotation.x = -Math.PI / 2;
            ground.position.y = -2;
            ground.receiveShadow = true;
            scene.add(ground);
            
            // 樱花花瓣
            for (let i = 0; i < 20; i++) {
                const petalGeometry = new THREE.SphereGeometry(0.02, 4, 4);
                const petalMaterial = new THREE.MeshLambertMaterial({ 
                    color: 0xFFB6C1,
                    transparent: true,
                    opacity: 0.8
                });
                
                const petal = new THREE.Mesh(petalGeometry, petalMaterial);
                petal.position.set(
                    (Math.random() - 0.5) * 20,
                    Math.random() * 10 + 5,
                    (Math.random() - 0.5) * 20
                );
                petal.scale.set(2, 0.5, 0.5);
                
                scene.add(petal);
            }
            
            console.log('环境已创建');
        }

        // 开始动画
        animate();
        console.log('动画循环已启动');
    </script>
</body>
</html>
